<!--
 * @Author: xiaoyan
 * @Date: 2021-09-28 14:04:29
 * @LastEditors: xiaoyan
 * @LastEditTime: 2021-09-29 14:00:32
 * @Description: 案件列表
 * @FilePath: \vue3-ts-demo\src\views\cases\list.vue
-->
<template>
<div class="container">
    <el-form :model="form" :inline="true">
    <el-form-item label="案件名称">
        <el-input v-model="form.ajmc" placeholder="请输入案件名称" maxlength="20" clearable></el-input>
    </el-form-item>
    <el-form-item label="状态">
        <el-select v-model="form.ajzt" placeholder="请选择" clearable>
            <el-option v-for="(item,index) in caseStatusList" :key="index" :value="item.dataValue" :label="item.dataName"></el-option>
        </el-select>
    </el-form-item>
    <el-form-item label="案发时间">
        <el-date-picker
            v-model="date"
            type="daterange"
            range-separator="~"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            unlink-panels
            :editable="false">
        </el-date-picker>
    </el-form-item>
    <el-button type="primary" @click="search">查询</el-button>
    </el-form>
    <el-table :data="list">
    <el-table-column label="" type="selection" width="50"></el-table-column>
        <el-table-column label="案件编号" prop="ajbh"></el-table-column>
        <el-table-column label="案件名称" prop="ajmc" min-width="150">
        </el-table-column>
        <el-table-column label="案情描述" prop="jyaq" show-overflow-tooltip></el-table-column>
        <el-table-column label="案发时间" prop="fakssj" width="160"></el-table-column>
        <el-table-column label="案发地址" prop="ajxxdz" min-width="150"></el-table-column>
    </el-table>
    <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="form.pageNum"
        :page-sizes="[10, 20, 50]"
        :page-size="form.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
</div>
</template>
<script setup lang="ts">
import {searchCase} from "@/api/police"
import {reactive,ref} from "vue"
import { ElMessage } from 'element-plus'
import {dateFormat} from "@/utils"
type fromType = {
    ajmc?:string,
    ajzt?: string,
    categoryId?: string,
    fakssj: string,
    fakssjb: string,
    pageNum:number,
    pageSize:number,
}
const caseStatusList = [
    {dataName: "全部",dataValue: ""},
];
const date = ref(['2020-06-28 00:00:00','2021-09-28 23:59:59'])
const form = reactive({
    fakssj: "",
    fakssjb: "",
    pageNum:1,
    pageSize:10,
}) as fromType;
let list = ref([{}])
let total = ref(0)
const ajaxList = ()=>{
    form.fakssj = dateFormat(date.value?date.value[0]:"2020-06-28")+" 00:00:00";
    form.fakssjb = dateFormat(date.value?date.value[1]:"2021-09-28")+" 23:59:59";
    searchCase(form).then(res=>{
        if(res?.resultCode === 0){
            list.value = res.data.data;
            total.value = res.data.recordTotal;
        }else{
            ElMessage({
                message: res?.resultMessage,
                type: 'error'
            });
        }
    });
}
ajaxList();
const search = ()=>{
    ajaxList();
}
const handleSizeChange = (pageSize:number)=>{
    form.pageSize = pageSize;
    ajaxList();
}
const handleCurrentChange = (pageNum:number)=>{
    form.pageNum = pageNum;
    ajaxList();
}
</script>